import { Route, Link, NavLink, Redirect, Switch } from 'react-router-dom'
import './App.css';
import Ref from './components/Ref';
import Home from './pages/home';
import Login from './pages/login';
import About from './pages/about';

function App() {
  return (
    <div className="App">
      {/* <Ref/> */}


      {/* React  包容性匹配 */}
      {/* /home/about */}
      {/* /home */}


      {/* Link */}
      {/* to  指定跳转地址 */}
      <NavLink exact to="/home">去往首页</NavLink> ------
      <NavLink exact to="/login">去往登录</NavLink> ------
      <NavLink exact to="/home/about">去往about</NavLink>

      {/* Route 展示视图  三种使用方式 */}
      {/* 1. component   后面跟的是引入的组件名称  会自动给当前组件的this.props上添加路由信息 */}
      {/* 2. render  后面跟的是回调函数  不会给当前组件的this.props上添加路由信息*/}
      {/* 3. children  双标签写法  不会给当前组件的this.props上添加路由信息*/}
      {/* path 区分路径 */}
      {/* 如何解决包容性匹配带来的问题 */}
      {/* 1. 精准匹配 exact */}
      {/* 2. Switch  包裹Route组件 */}
      <Switch>
        {/* <Route path="/home/about" component={About} />
        <Route path="/home" component={Home} />
        <Route path="/login" component={Login} /> */}

        {/* 2. render */}
        {/* <Route path="/home/about" render={(props) => {
          // props   
          console.log(props)
          return <div>
            <p>我是公用的面包屑组件</p>
            <About title="我是自定义属性" { ...props }/>
          </div>
        }} />
        <Route path="/home" render={() => {
          return <Home/>
        }} />
        <Route path="/login" render={() => {
          return <Login />
        }} /> */}

        {/* 3. children */}
        <Route path="/home/about">
          <About/>
        </Route>
        <Route path="/home">
          <Home/>
        </Route>
        <Route path="/login">
          <Login/>
        </Route>
      </Switch>


      {/* from  从哪来 */}
      {/* to  去哪 */}
      <Redirect to="/home" />
    </div>
  );
}

export default App;
